<template>
	<view class="my-album">
		<view class="my-album-item" v-for="item,index in list" :key="index">
			<text class="my-album-item-text" v-if="index===0">Media type</text>
			<text class="my-album-item-text" v-if="index===1">More projects</text>
			<view class="my-album-item-grid">
				<view class="my-album-item-image" v-for="item2,index2 in item" :key="index2"
					@click="toPhoto(item2.photoType)">
					<view class="my-album-item-image-bg" v-if="item2.CoverUrl==''">

						<image src="/static/icon/photo.png" mode=""></image>
					</view>

					<view class="my-album-item-image-bg-image" v-else>
						<image :src="item2.CoverUrl" mode="" v-if="item2.photoType!=2"></image>
						<image :src="item2.CoverUrl+'?x-oss-process=video/snapshot,t_1,m_fast'" mode="aspectFill"
							v-if="item2.photoType == 2"></image>
					</view>
					<view class="my-album-item-image-text">
						<text>{{item2.name}}</text>
						<text>{{item2.Count}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(['list'])
	console.log(props.list);
	const toPhoto = (photoType) => {
		uni.navigateTo({
			url: '/pages/FindPet/photo?photoType=' + photoType
		})
	}
</script>

<style lang="scss" scoped>
	.my-album {
		background-color: #f5f8fb;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		padding-top: 0;
		box-sizing: border-box;

		.my-album-item {
			margin-top: 40rpx;

			.my-album-item-text {
				font-weight: 600;
				font-size: 28rpx;
				// margin-bottom: 30rpx;
			}


			.my-album-item-grid {

				margin-top: 40rpx;
				width: 100%;
				box-sizing: border-box;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 10px;
				// border: 1px solid;
				padding-bottom: 40rpx;
				border-bottom: 4px solid #eef1f4;

				.my-album-item-image {

					display: flex;
					flex-direction: column;

					// display: grid;
					.my-album-item-image-bg {
						width: 100%;
						// border: 1px solid red;
						background-color: #e5e5e5;
						border-radius: 15rpx;
						height: 110px;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.my-album-item-image-bg-image {


						image {
							width: 100%;
							height: 110px;
							border-radius: 15rpx;
							// height: 30rpx;
						}

					}

					.my-album-item-image-text {
						display: flex;
						flex-direction: column;
						align-items: center;

						text {
							&:nth-of-type(1) {
								margin-top: 20rpx;
								font-weight: 600;
							}

							&:nth-of-type(2) {
								// font-weight: 600;
								font-size: 24rpx;
								margin-top: 5rpx;
							}
						}
					}

				}
			}

		}
	}
</style>